<template>
	<view class="container">
		<view class="appointmentList">
			<view class="list">
				<view class="left">
					<view  class="tit">预约门店</view>
					<view class="txt">{{makeStoreInfo.title}}</view>
				</view>
				<!-- <u-icon name="arrow-right" color="#000" size="28"></u-icon> -->
			</view>
			<view class="list">
				<view class="left">
					<view class="tit">预约人数</view>
					<view class="txt">{{makeNum}}人</view>
				</view>
			</view>
		</view>
		<!-- 项目选择 -->
		<view class="chioseProject">
			<view class="headTitle">项目选择</view>
			<view class="projectWrap">
				<view class="list" v-for="(ele,index) in projectList" :key="index">
					<view class="left">{{ele.name}} （{{ele.duration}}分钟）</view>
					<view class="right">
						<text>¥{{ele.price}}</text>
						<u-icon name="arrow-right" color="#000" size="28"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<!-- 预约时间 -->
		<view class="chioseTime">
			<view class="headTitle">
				<text>预约时间</text>
				<view class="right" @click="freeTell()">
					<text>想预约的时间没有了？点击拨打门店电话</text>
					<image src="https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/09/13/-Telephone2x.png" mode=""></image>
				</view>
			</view>
			<view class="timerWrap">
				<view class="dateList">
					<view class="list" v-for="(ele,index) in dateList" :key="index"
					@click="chioseDay(ele,index)"
					>
						<view class="dateTitle"
						:class="dayActive == index ? 'dayActive' : ''"
						>{{ele.date}}</view>
						<view class="date"
						:class="dayActive == index ? 'dayActive' : ''"
						>{{ele.week}}</view>
					</view>
				</view>
				<view class="chioseTimeList">
					<!-- ele.num == 0 ? 'full' : ''   || -->
					<view class="list" :class="ele.isCheck ? 'active' : '' "
					@click="chioseTime(ele,index)"
					v-for="(ele,index) in list" :key="index">
						<view class="tit">{{ele.time}}</view>
						<view class="price">{{ele.price}}</view>
						<!-- <view class="status " v-if="ele.num == 0">已定满</view> -->
						<view class="status" v-if="ele.isCheck">已选中</view>
						<view class="status" v-if="!ele.isCheck">仅剩5人</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 指定技师 -->
		<view class="technicianWrap">
			<view class="title">指定技师</view>
			<view class="groupList">
				<view class="list" v-if="makeTech.length" v-for="(ele,index) in makeTech" :key="index" @click="selectPersonal()">
					<text>{{ele.name}}（{{ele.number}}）</text>
					<u-icon name="arrow-right" color="#000" size="28"></u-icon>
				</view>
				<view class="list" v-if="!makeTech.length" @click="selectPersonal()">
					<text>请选择技师</text>
					<u-icon name="arrow-right" color="#000" size="28"></u-icon>
				</view>
			</view>
		</view>
		<view class="remarkWrap">
			<view class="title">备注</view>
			<view class="remark">
				<textarea v-model="remark" placeholder="您还有其他要求，可在此备注告诉店长"  placeholder-style="color:#999999"/>
				<image src="https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/09/13/2x.png" mode=""></image>
			</view>
		</view>
		<view class="next" @click="next()">下一步</view>
	</view>
</template>
<script>
	var util= require("@/common/utils.js")
	export default {
		data() {
			return {
				remark:'',
				dayActive:0,
				date:'',
				stores_id:'',
				dateList:[],
				list:[],
				projectList:[],
				times:'',
				nodeTime:'',
				order_num:''
			}
		},
		async onLoad({id,order_num}) {
			if(order_num){
				this.order_num = order_num
			}
			// 获取预约项目
			if(this.chioseProjects.length){
				this.projectList = [...this.chioseProjects,...this.makeProject]
			}else{
				this.projectList = [...this.makeProject]
			}
			let time = util.formatDate(new Date());
			
			let date=util.getDates(4, time);
			date.forEach((ele)=>{
				let time = ele.time.split('-')
				ele.date = time[1] +'-'+ time[2]
			})
			this.dateList = date
			this.stores_id = this.store_id
			this.date = this.dateList[0].time
			this.$u.vuex("makeDays",this.date)
			this.getTimeNode(0)
			let nodeTime = this.time(new Date(),1).split(":")
			this.nodeTime = nodeTime[0]*1*60 + nodeTime[1]*1
			console.log(nodeTime,this.nodeTime,"订单")
		},
		methods: {
			// 拨打电话
			async freeTell(){
				// 用户点击次数
				let {data,code} = await this.$u.api.serUserClick({type:1});
				if(code){
					uni.makePhoneCall({
					  phoneNumber: this.makeStoreInfo.tel,
					})
				}
			},
			selectPersonal(){
				// if(this.userInfo.vip_id < 1 ){
				// 	this.utlis.Toast("您还不是会员，暂不可预约技师！")
				// 	 return
				// }
				if(!this.times){
					this.utlis.Toast("请选择预约的时间点")
					return
				}
				this.utlis.goUrl(`/pages/mine/selectPersonal`)
			},
			next(){
				if(!this.date){
					this.utlis.Toast("请选择预约日期")
					return
				}
				if(!this.times){
					this.utlis.Toast("请选择预约时间")
					return
				}
				this.$u.vuex("remarks",this.remark)
				this.utlis.goUrl(`/pages/reserve/confirmReseve?order_num=${this.order_num}`)
			},
			// 选择日期
			chioseDay(ele,index){
				this.dayActive = index
				this.date = ele.time
				this.$u.vuex("makeDays",this.date)
				this.getTimeNode(index)
			},
		    async getTimeNode(index){
				this.list = []
				let {data,code} = await this.$u.api.getTimeNode({store_id:this.makeStore_id,date:this.date});
				let arr = []
				data.forEach((ele)=>{
					ele.isCheck = false
					if(index == 0){
						let nodeTime = ele.time.split(":")
						ele.nodeTime = nodeTime[0]*1*60 + nodeTime[1]*1
						if(ele.nodeTime >this.nodeTime){
							arr.push(ele)
						}
					}else{
						arr.push(ele)
					}
				})
				if(arr.length >= 16){
					this.list = arr.slice(0,16)
				}else{
					this.list = arr
				}
				console.log(arr,"88888888888")
				// let nodeTime = this.time(new Date(),1).split(":")
				// this.nodeTime = nodeTime[0]*1*60 + nodeTime[1]*1
				// this.list = arr
				console.log(this.list,"订单")
			},
			time(date,type) {
				var y = date.getFullYear()
				var m = date.getMonth() + 1
				m = m < 10 ? '0' + m : m
				var d = date.getDate()
				d = d < 10 ? '0' + d : d
				var h = date.getHours()
				h = h < 10 ? '0' + h : h
				var minute = date.getMinutes()
				minute = minute < 10 ? '0' + minute : minute
				var second = date.getSeconds()
				second = second < 10 ? '0' + second : second
				if(type){
					return h + ':' + minute
				}else{
					return y + '-' + m + '-' + d
				}
			},
			chioseTime(ele,index){
				this.list.forEach((ele,currIndex)=>{
					if(index != currIndex){
						ele.isCheck = false
					}
				})
				ele.isCheck = !ele.isCheck
				if(ele.isCheck){
					this.times = ele.time
					this.$u.vuex("makeTime",ele.time)
				}else{
					this.times = ""
					this.$u.vuex("makeTime",'')
				}
				// if(ele.num == 0){
				// 	this.utlis.Toast("已预定满,请选择其他时间！")
				// }else{
					
				// }
			}
		}
	}
</script>
<style lang="scss" scoped >
.container{
	padding: 40rpx 32rpx 117rpx 32rpx;
	.dayActive{
		color: #097DFF!important;
	}
	.next{
		width: 670rpx;
		line-height: 100rpx;
		background: linear-gradient(140deg,#f2e4a2 0%, #d1b87d);
		border-radius: 8rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 32rpx;
		margin: 0 auto;
	}
	.remarkWrap{
		margin-bottom: 40rpx;
		.title{
			padding: 40rpx 0 37rpx 32rpx;
			color: #666666;
			font-size: 26rpx;
		}
		.remark{
			width: 686rpx;
			background: #ffffff;
			border-radius: 8rpx;
			padding: 33rpx 30rpx 32rpx 32rpx;
			position: relative;
			box-sizing: border-box;
			textarea{
				width: 95%;
				height: 176rpx;
			}
			image{
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				right: 32rpx;
				top: 33rpx;
			}
		}
		
	}
	.technicianWrap{
		.title{
			padding: 43rpx 0 30rpx 32rpx;
			color: #666666;
			font-size: 26rpx;
		}
		.groupList{
			background: #ffffff;
			border-radius: 8rpx;
			padding: 0 32rpx;
			.list{
				height: 94rpx;
				border-bottom: 1rpx solid rgba(142,142,142,.24);
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #333333;
				font-size: 26rpx;
			}
			.list:last-child{
				border-bottom: 1rpx solid #FFFFFF;
			}
		}
	}
	
	.chioseTime{
		.chioseTimeList{
			display: flex;
			flex-wrap: wrap;
			.list{
				width: 120rpx;
				border-radius: 4px;
				margin-right: 42rpx;
				text-align: center;
				background: #e8f6ff;
				margin-bottom: 42rpx;
				padding-top: 23rpx;
				.tit{
					color: #097DFF;
					font-size: 30rpx;
				}
				.price{
					color: #097DFF;
					opacity: 0.7;
					font-size: 24rpx;
					margin: 8rpx 0 12rpx 0;
				}
				.status{
					width: 120rpx;
					line-height: 35rpx;
					background: #097dff;
					border-radius: 4rpx;
					color: #FFFFFF;
					font-size: 24rpx;
				}
			}
			.active{
				background-color: #FFF7E8;
				.tit{
					color: #B99940;
				}
				.price{
					color: #B99940;
				}
				.status{
					background: linear-gradient(140deg,#f2e4a2 0%, #d1b87d);
				}
			}
			.full{
				background-color: #F4F4F4;
				.tit{
					color: #999999;
				}
				.price{
					color: #999999;
				}
				.status{
					background: #E2E2E2;
				}
			}
			.list:nth-child(4n+4){
				margin-right: 0;
			}
		}
		
		.timerWrap{
			background: #ffffff;
			border-radius: 8rpx;
			padding: 0 42rpx 0 38rpx;
			.dateList{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx 0 40rpx 0;
				.list{
					width: 120rpx;
					text-align: center;
					font-size: 24rpx;
					.dateTitle{
						color: #333333;
						margin-bottom: 16rpx;
					}
					.date{
						color: #666666;
					}
				}
			}
		}
		
		.headTitle{
			padding: 43rpx 0 32rpx 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #666666;
			font-size: 26rpx;
			.right{
				display: flex;
				align-items: center;
				color: #D1B97E;
				image{
					width: 31rpx;
					height: 31rpx;
					margin-left: 15rpx;
				}
			}
		}
	}
	.chioseProject{
		.projectWrap{
			background: #ffffff;
			border-radius: 8rpx;
			padding: 0 33rpx 0 32rpx;
			.list{
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #333333;
				font-size: 26rpx;
				padding: 35rpx 0;
				.right{
					font-size: 24rpx;
					u-icon{
						margin-left: 20rpx;
					}
				}
			}
		}
		.headTitle{
			font-size: 26rpx;
			color: #666666;
			line-height: 26rpx;
			padding: 40rpx 0 30rpx 32rpx;
		}
	}
	.appointmentList{
		width: 686rpx;
		background: #ffffff;
		border-radius: 8rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
		.list{
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 82rpx;
			border-bottom: 1rpx solid rgba(142,142,142,.24);
			.left{
				display: flex;
				align-items: center;
				.tit{
					color: #333333;
					font-size: 26rpx;
					margin-right: 40rpx;
				}
				.txt{
					color: #666666;
					font-size: 24rpx;
				}
			}
		}
		.list:last-child{
			border-bottom: 1rpx solid #FFFFFF;
		}
	}
}
</style>
<style >
page{
	background-color: #F6F7FA;
}
</style>
